<template>

  <div class="row">
    <div class="col-md-12">
      <h1 class="page-header">
        课程管理 <small></small>
        <el-button type="primary" size="large" @click="jumpTo('addCurriculumSeries')" class="float-right" circle>
          <el-icon :size="20" style="vertical-align: middle;">
            <Plus/>
          </el-icon>
        </el-button>
      </h1>

    </div>
  </div>
  <!-- /. ROW  -->

  <div class="row">
    <div class="col-md-6 col-sm-4" v-for="(item,i) in CurriculumList">
      <div class="panel panel-default">
        <div class="panel-heading h-auto flex items-center">
          <el-row class="w-full ">

            <div class=" 2xl:w-4/12 2xl:justify-items-start justify-items-center w-full" style="display: grid"><p style="line-height: 42px">{{ item.CurriculumSeriesName }}</p></div>
            <div class=" 2xl:w-8/12 2xl:justify-items-end justify-items-center w-full" style="display: grid">
              <p>
                <el-button type="primary" size="large"
                           @click="$ses.pushByNameResId('CurriculumIntroduction',{'seriesId':item.ID,'describe':item.CurriculumSeriesDescribe})"
                           style="margin-left: auto">
                  修改课程简介
                  <el-icon :size="15" style="vertical-align: middle;">
                    <Document/>
                  </el-icon>
                </el-button>
                <el-button type="primary" size="large" @click="jumpTo('curriculum_series_info',{'seriesId':item.ID})"
                           style="">
                  进入课程
                </el-button>
                <el-button type="primary" size="large" @click="delCurrSeries(item)">
                  删除
                  <el-icon :size="15" style="vertical-align: middle;">
                    <Delete/>
                  </el-icon>
                </el-button>
              </p>
            </div>
          </el-row>






        </div>
        <el-scrollbar height="300px">
          <div class="panel-body ql-editor" v-html="item.CurriculumSeriesDescribe">

          </div>
        </el-scrollbar>

        <div class="panel-footer">
        </div>
      </div>
    </div>
  </div>
  <!-- /. ROW  -->


</template>

<script setup>
import {
  Delete, Document, Plus
} from '@element-plus/icons-vue'
</script>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "curriculum_series",
  data() {
    return {
      CurriculumList: []
    }
  },
  methods: {
    delCurrSeries(item) {
      axios.get("/api/teacher/DeleteCourseSeries", {
        params: {
          id: item.ID
        }
      }).then((res) => {
        if (res.status === 200 && res.data === 'delSuc') {
          ElMessage.success({
            message: "删除成功"
          })
          this.getData()
        }
      })
    },
    jumpTo: function (name, data) {
      this.$router.push({name: name, query: data})
    },
    getCurriculumSeries: function (curriculumSeriesId) {
      this.jumpTo('add_curriculum', {'curriculumSeriesId': curriculumSeriesId})
    },
    getData: function () {
      axios.post("/api/open/GeyCurriculumSeries").then((res) => {
        if (res.status === 200) {
          this.CurriculumList = res.data
        }
      })
    },
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

</style>